<script lang="ts" setup>
import {onMounted, ref} from 'vue';
import {useRoute} from "vue-router";
import {AlarmRecord , AnalogAlarmRecord} from  '@/service/api/bigScreen';
import {useRouterPush} from "@/hooks/common/router";
import {useProjectStore} from "@/store/modules/project";

const route = useRoute();
const projectStore = useProjectStore();
const projectId = projectStore.currentProject?.id;
let list = ref([])
let data = ref({
    pageNo:1,
    pageSize:30,
    projectId
})
//获取告警列表
const getAlarmRecord = () => {
    AlarmRecord(data.value).then(res => {
        list.value = res.data?.data;
    })
}

//设置告警状态
const {routerPush} = useRouterPush();

const setAnalogAlarmRecord = (deviceId) => {
    let obj = {
        isread : 1,
        deviceId
    }
    AnalogAlarmRecord(obj).then(res => {
        console.log(res)
        if (res.data === 0){
            routerPush('/breedingmanage/warningmanage')
        }
    })
}

onMounted(() => {
    getAlarmRecord()
})
</script>


<template>
    <div class="Card">
        <div class="card-header">
            <img src="../../../assets/imgs/breedAquatics/title_gjxx@2x.png" alt="">
        </div>
        <div class="card-warp">
            <div class="warp-content">
                <div class="list-title list">
                    <div>
                        时间
                    </div>
                    <div>
                        名称
                    </div>
                    <div>
                        告警程度
                    </div>
                    <div>
                        状态
                    </div>
                </div>
                <div>
                    <vue3-seamless-scroll
                        class="scroll"
                        :step="0.2"
                        :list="list"
                        hover="true"
                    >
                        <div v-for="(i,index) in list" :key="index" class="list-content list item" @click="setAnalogAlarmRecord(i.deviceId)">
                            <div>
                                {{i.gmtCreated}}
                            </div>
                            <div>
                                {{i.categoryName}}
                            </div>
                            <div style="text-align: center" :class="i.status ? 'yellowF' : ''">
                                {{i.stauts == 1 ? '偏低' : '偏高'}}
                            </div>
                            <div style="text-align: center" :class="i.isread  == 1 ? 'greenF' : 'redF'">
                                {{i.isread == 1 ? '已处理' : '未处理'}}
                            </div>
                        </div>

                    </vue3-seamless-scroll>
                </div>

            </div>
        </div>
    </div>
</template>


<style lang="scss" scoped>
.Card {
    width: 450px;
    height: 493px;
    background-image: url("@/assets/imgs/breedAquatics/img_bto.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;

    .scroll {
        height: 350px;
        width: 100%;
        //margin: 100px auto;
        overflow: hidden;
    }

    .card-header {
        width: 100px;
        height: 50px;
        padding-top: 20px;
        margin-left: 20px;
    }

    .card-warp {
        flex: 1;
        padding: 10px 20px 0 20px;

        .warp-content {
            display: flex;
            flex-direction: column;
            height: 100%;
            padding: 0 15px;

            .list-title {
                font-weight: 500;
                font-size: 16px;
                color: #8DD8F2;
                margin-top: 20px;

                div {
                    font-weight: 500;
                    font-size: 16px;
                    color: #8DD8F2;
                    padding-left: 10px;
                }
            }

            .list-content {
                padding: 11px 10px;
                font-weight: 400;
                font-size: 14px;
                color: #F1F1F1;
                background-size: 100% 100%;
                background-image: url("../../../assets/imgs/breedAquatics/bg_list_yclb_nor@2x.png");

                &:hover {
                    background-image: url("../../../assets/imgs/breedAquatics/bg_list_yclb_sel@2x.png");
                    color: #83FFF1;
                    cursor: pointer;
                }
                .yellowF{
                    color: #D1B02E;
                }
                .redF{
                    color: #D64F37;
                }
                .greenF{
                    color: #3AB25F;
                }
            }

            .list {
                display: flex;
                justify-content: space-between;
                font-weight: 400;
                font-size: 16px;
                color: #F1F1F1;

                div {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;

                    &:nth-child(1) {
                        flex: 3;
                    }

                    &:nth-child(2) {
                        flex: 3;
                    }

                    &:nth-child(3) {
                        flex: 2;
                    }

                    &:nth-child(4) {
                        flex: 2;
                    }
                }

                .list-right {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    img {
                        width: 20px;
                        height: 20px;
                    }
                }
            }
        }
    }
}
</style>
